<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Hello Google Cloud Storage</title>
</head>

<body onload="setDownloadDefaults()">
  <h1>Hello Google Cloud Storage!</h1>

  <table>
    <tr>
      <td style="font-weight: bold;">Upload a file to Google Cloud Storage:</td>
    </tr>
    <tr>
      <td>
        <form action="/index.html" enctype="text/plain" method="get" name="putFile" id="putFile">
          <div>
            Bucket: <input type="text" name="bucket" />
            File Name: <input type="text" name="fileName" />
            <br /> File Contents: <br />
            <textarea name="content" id="content" rows="3" cols="60"></textarea>
            <br />
            <input type="submit" onclick='uploadFile(this)' value="Upload Content" />
          </div>
        </form>
      </td>
    </tr>
    <tr>
      <td style="font-weight: bold;">Download a file from Google Cloud Storage:</td>
    </tr>
    <tr>
      <td>
        <form name="getFile">
          <div>
            Bucket: <input type="text" name="bucket" id="bucket" />
            File Name: <input type="text" name="fileName" id="fileName" />
          </div>
        </form>
        <form action="/index.html" method="get" name="submitGet">
          <div>
            <input type="submit" onclick='changeGetPath(this)' value="Download Content" />
          </div>
        </form>
      </td>
    </tr>
  </table>
  <script>
      function setDownloadDefaults() {
        var url = location.search;
        var bucketArg = url.match(/bucket=[^&]*&/);
        if (bucketArg !== null) {
          document.getElementById("bucket").value = bucketArg.shift().slice(7, -1);
        }
        var fileArg = url.match(/fileName=[^&]*&/);
        if (fileArg !== null) {
          document.getElementById("fileName").value = fileArg.shift().slice(9, -1);
        }
      }

      function changeGetPath() {
        var bucket = document.forms["getFile"]["bucket"].value;
        var filename = document.forms["getFile"]["fileName"].value;
        if (bucket == null || bucket == "" || filename == null || filename == "") {
          alert("Both Bucket and FileName are required");
          return false;
        } else {
          document.submitGet.action = "/gcs/" + bucket + "/" + filename;
        }
      }

      function uploadFile() {
        var bucket = document.forms["putFile"]["bucket"].value;
        var filename = document.forms["putFile"]["fileName"].value;
        if (bucket == null || bucket == "" || filename == null || filename == "") {
          alert("Both Bucket and FileName are required");
          return false;
        } else {
          var postData = document.forms["putFile"]["content"].value;
          document.getElementById("content").value = null;

          var request = new XMLHttpRequest();
          request.open("POST", "/gcs/" + bucket + "/" + filename, false);
          request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
          request.send(postData);
        }
      }
    </script>
</body>
</html>
